<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div>
    <div class="btns">
      <button data-path="news">新闻</button>
      <button data-path="play">娱乐</button>
      <button data-path="game">游戏</button>
    </div>
    <div class="container"></div>
  </div>
</body>

</html>
<script>
  const btns = document.querySelectorAll(".btns button");
  const c = document.querySelector(".container")

  //1.书写一个路由表,在实现路由的时候,按照这个路由表的映射关系决定
  const routes = [{
      path: "/news",
      content: "我是新闻模块"
    },
    {
      path: "/play",
      content: "我是娱乐模块"
    },
    {
      path: "/game",
      content: "我是游戏模块"
    },
  ];

  //2. 给每一个导航绑定点击事件,可以根据导航上的属性,使用history对象的pushState方法或者replaceState方法(不会留下历史记录)来进行改变地址不刷新页面
  for (var i = 0; i < btns.length; i++) {
    btns[i].onclick = function () {
      history.pushState(null, null, this.dataset.path);

      //改完就立马去更新视图
      routes.forEach((item) => {
        if (item.path.slice(1) === this.dataset.path) {
          c.textContent = item.content;
        }
      });
    };
  }
</script>